<template>
  <!-- v-dialogDrag -->
  <el-dialog class="dialog-view" :modal="true" :visible.sync="showDislog" :close-on-click-modal="isModal" :center="isCenter" :width="widthNum" :before-close="handleClose" :show-close="showClose" :modal-append-to-body="modalAppendToBody" :append-to-body="appendToBody">
    <!-- 标题 -->
    <span slot="title" class="dialogTitle" v-show="isShowTitle">{{
      titleText
    }}</span>
    <!-- 内部身体内容，通过具名插槽来自定义内容-->
    <slot name="main"></slot>
    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer" v-if="btnShow">
      <el-button @click="handelScore" size="small" v-show="dynamicText">
        {{ dynamicText }}</el-button>
      <el-button @click="handleClose" size="small">取 消</el-button>
      <!-- :disabled="changeText === '配置中'" -->
      <el-button v-preventReClick type="primary" @click="handleConfirm" :loading="~changeText.indexOf('中') ? true : false" size="small">{{ isBulkAdd ? changeText : "确定" }}</el-button>
      <!-- 生成不需要disabled -->
      <!-- :disabled="isGenearte && isGenearteDisable" -->
    </div>
    <!-- 只显示关闭按钮 -->
    <div slot="footer" class="dialog-footer" v-if="concelShow">
      <el-button @click="close" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * 弹窗组件
 * props的数据含义：
 * {string} titleText - 弹窗标题
 * {string} [widthNum = "500px"] - 弹窗宽度,默认宽度是500；
 * {boolean} [isCenter = true] - 是否对头部和底部采用居中布局,默认是true,居中显示
 * {boolean} [isModal = false] - 是否通过点击遮罩层关闭弹,默认值是false,点击遮罩层不能关闭弹窗
 */
export default {
  props: {
    titleText: {
      type: String,
      default: ""
    },
    widthNum: {
      type: String,
      default: "500"
    },
    isCenter: {
      type: Boolean,
      default: true
    },
    isModal: {
      type: Boolean,
      default: false
    },
    btnShow: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    isBulkAdd: {
      type: Boolean,
      default: false
    },
    isGenearteDisable: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: false
    },
    // 是否是内嵌dialog
    appendToBody: {
      type: Boolean,
      default: false
    },
    changeText: {
      type: String,
      default: ""
    },
    isShowTitle: {
      type: Boolean,
      default: true
    },
    concelShow: {
      type: Boolean,
      default: false
    },
    dynamicText: {
      type: String,
      default: ""
    }
  },

  computed: {
    showDislog() {
      // 通过判断标题是否为空，设置弹窗显示或隐藏
      return this.titleText === "" ? false : true;
    }
  },

  watch: {
    titleText: {
      handler(n) {
        if (n === "") {
          /**
           * 标题为空字符串，那么弹窗需要关闭，同时标题和底部按钮需要还原居左
           * 弹窗居中置为false，标题和底部按钮还原局左，
           * 为了避免以下这种情况发生：本次弹窗居中，下次弹窗居左，并且没有传入isCenter的值，
           * 那么这个时候isCenter还是之前的true，没有发生变化，因此需要这里重置isCenter为默认值false
           */
          this.$emit("update:isCenter", true);
        }
      },
      immediate: true
    }
  },

  methods: {
    handleClose() {
      // 弹窗关闭
      this.$emit("close");
    },

    // 确定事件
    handleConfirm() {
      this.$emit("save");
    },
    // 关闭按钮
    close() {
      this.$emit("close");
    },
    handelScore() {
      this.$emit("score");
    }
  }
};
</script>

<style lang="less">
.dialog-view {
  .el-dialog__header {
  }
  .dialogTitle {
    font-size: 17px;
    color: #ffffff;
    margin: 0 !important;
    //  height: 26px;
    // line-height: 26px;
  }
}
// 弹框边框样式
// .dialog {
// border:1px solid rgb(0, 104, 183);
// }
</style>
